<template>
  <div class="contribute">
    <div class="wrap">
      <div class="row center">
        <div class="title">投稿</div>
      </div>
      <div class="contribute-title row">
        <div class="title-text">投稿标题</div>
        <input v-model="contribute.title" type="text" maxlength="30" />
      </div>
      <div class="contribute-content row">
        <div class="title-text">投稿正文</div>
        <textarea
          v-model="contribute.content"
          @input="handleInputContent"
          maxlength="10000"
        ></textarea>
        <span class="word-count"> {{ contribute.content?.length }}/10000 </span>
      </div>
      <div class="contribute-title row">
        <div class="title-text">视频/图片</div>
        <div class="media-container">
          <div
            class="upload-item"
            v-for="(file, index) in contribute.mediaList"
            :key="index"
          >
            <img
              v-if="file.type.startsWith('image')"
              :src="createMediaURL(file)"
              class="media"
            />
            <video
              v-if="file.type.startsWith('video')"
              :src="createMediaURL(file)"
              class="media"
            ></video>
            <i
              class="xzfont icon-close"
              @click="contribute.mediaList.splice(index, 1)"
            ></i>
          </div>
          <xz-upload-area
            @upload="handleUpload"
            @click="uploadButtonRef.click()"
            class="upload-area upload-item"
            v-if="contribute.mediaList.length < 3"
          >
            <i class="xzfont icon-upload"></i>
            <p>点击/拖拽上传文件</p>
            <input
              @change="handleUploadFile"
              type="file"
              ref="uploadButtonRef"
              style="display: none"
            />
          </xz-upload-area>
        </div>
      </div>
      <div class="row flex flex-ac flex-jc">
        <a class="nav-btn" @click="handleContribute">
          <div class="nav-upload">
            <svg
              width="18"
              height="18"
              viewBox="0 0 18 18"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
              class="header-upload-entry__icon"
            >
              <path
                d="M12.0824 10H14.1412C15.0508 10 15.7882 10.7374 15.7882 11.6471V12.8824C15.7882 13.792 15.0508 14.5294 14.1412 14.5294H3.84707C2.93743 14.5294 2.20001 13.792 2.20001 12.8824V11.6471C2.20001 10.7374 2.93743 10 3.84707 10H5.90589"
                stroke="currentColor"
                stroke-width="1.7"
                stroke-linecap="round"
                stroke-linejoin="round"
              ></path>
              <path
                d="M8.99413 11.2353L8.99413 3.82353"
                stroke="currentColor"
                stroke-width="1.7"
                stroke-linecap="round"
                stroke-linejoin="round"
              ></path>
              <path
                d="M12.0823 6.29413L8.9941 3.20589L5.90587 6.29413"
                stroke="currentColor"
                stroke-width="1.7"
                stroke-linecap="round"
                stroke-linejoin="round"
              ></path>
            </svg>
            <span>投稿</span>
          </div>
        </a>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { message } from "@/utils/message";
import { uploadFile } from "@/utils/file";
import { uploadCommunity } from "@/api/post";
const contribute = ref<Contribute>({
  title: "",
  content: "",
  mediaList: [],
});

const createMediaURL = (file: File) => {
  return URL.createObjectURL(file);
};

const uploadButtonRef = ref();

const handleContribute = async () => {
  if (!contribute.value.title && !contribute.value.content) {
    return message({
      type: "error",
      message: "稿件至少要有一个标题和正文",
      duration: 2000,
    });
  }
  message({
    type: "success",
    message: "稿件正在上传",
    duration: 2000,
  });
  const fileUrls = [];
  for (const file of contribute.value.mediaList) {
    const result = await uploadFile(file);
    if (result) {
      fileUrls.push(result.data.data);
    }
  }
  const result = await uploadCommunity({
    postContent: contribute.value.content || "",
    postTitle: contribute.value.title || "",
    cover: fileUrls.join(","),
  });
  if (result.data.code === 200) {
    return message({
      type: "success",
      message: "稿件上传成功，感谢您的上传❤️",
      duration: 2000,
    });
  }
};

const handleUploadFile = (e: Event) => {
  const target = e.target as HTMLInputElement;
  if (target.files) {
    contribute.value.mediaList.push(target.files[0]);
  }
};

const handleInputContent = (e: Event) => {
  const textarea = e.target as HTMLTextAreaElement;
  textarea.style.height = "auto";
  textarea.style.height = `${textarea.scrollHeight}px`;
};

const handleUpload = (fileList: FileList) => {
  for (const file of fileList) {
    contribute.value.mediaList.push(file);
  }
};
</script>

<style scoped lang="scss">
.contribute {
  padding: 20px;
  display: flex;
  width: 100%;
  height: 100%;

  .wrap {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 0 15%;
    gap: 2rem;

    .title {
      font-weight: 500;
      font-size: 1.2rem;
      margin-bottom: 2rem;
    }

    .row {
      display: flex;
      gap: 1rem;
      position: relative;

      .title-text {
        text-overflow: ellipsis;
        white-space: nowrap;
        min-width: 75px;
      }

      input {
        min-height: 34px;
        width: 100%;
        display: block;
        padding: 6px 12px;
        font-size: 16px;
        line-height: 1.4;
        border-radius: 4px;
        border: var(--style-border);
        background: var(--xz-card-bg);
        outline: none;
        color: var(--xz-fontcolor);

        &:hover {
          border: var(--style-border-hover);
        }

        &:focus {
          border: var(--style-border-hover);
          box-shadow: 0 0 1px 2px var(--xz-theme);
        }
      }

      textarea {
        background-color: var(--xz-card-bg);
        border-color: rgba(144, 147, 153, 0.31) !important;
        color: currentColor;
        display: block;
        resize: vertical;
        line-height: 1.5;
        box-sizing: border-box;
        width: 100%;
        font-size: inherit;
        transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
        border-radius: 12px;
        min-height: 100px;
        padding: 16px 16px 40px 16px;
        overflow: auto;
        border: 1px solid #dcdfe6;
        height: auto;

        &:focus {
          outline: 0;
          border: var(--style-border-hover);
          box-shadow: 0 0 1px 2px var(--xz-theme);
        }
      }

      .word-count {
        position: absolute;
        font-size: 12px;
        bottom: 5px;
        right: 10px;
        color: currentColor;
        background: transparent;
      }
    }

    .row.center {
      justify-content: center;
    }
  }
}

.media-container {
  width: 100%;
  display: flex;
  gap: 0.5rem;
}

.upload-area {
  min-height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1rem;

  i {
    color: var(--xz-theme);
    font-size: 40px;
  }

  p {
    font-size: 12px;
  }
}

.upload-item {
  width: 33.33%;
  max-height: 200px;
  position: relative;

  .media {
    width: 100%;
    height: 100%;
    max-height: 100%;
    object-fit: cover;
  }

  i.icon-close {
    position: absolute;
    top: 10px;
    right: 10px;
    color: var(--xz-white);
  }
}

[data-theme="dark"] .media {
  filter: brightness(0.8);
}

.nav-upload {
  font-size: 16px;
  width: 120px;
  height: 40px;
}
</style>
